<template>
  <div>
    <van-nav-bar title="黑马头条 - 登录" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号码"
        required
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写正确的手机号', trigger: 'onChange', pattern: /^1[3456789]\d{9}$/}]"
      />
      <van-field
        v-model="code"
        type="password"
        name="code"
        label="登录密码"
        required
        placeholder="登录密码"
        :rules="[{ required: true, message: '请填写密码', trigger: 'onChange', pattern: /^\d{6}$/}]"
      />
      <div style="margin: 16px">
        <van-button
        round
        block
        type="info"
        native-type="submit"
        :loading='isLoading'
        :disabled='isLoading'
        loading-text="拼命加载ing...">
        提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
// import { Notify } from 'vant'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      mobile: '13900002020',
      code: '246810',
      isLoading: false
    }
  },
  methods: {
    ...mapMutations(['setToken', 'refreshToken']),
    async onSubmit (values) {
      this.isLoading = true
      const [err, res] = await loginAPI(values)
      if (err) this.$Notify({ type: 'warning', message: '手机号或密码不正确' })
      else {
        this.$Notify({ type: 'success', message: '登录成功' })
        // console.log(res)
        const { token, refresh_token } = res.data.data
        this.setToken(token)
        this.refreshToken(refresh_token)
        // 当登录成功后 跳转到 layout 页面
        this.$router.push({
          path: '/layout'
        })
      }
      this.isLoading = false
    }
    // 1. 头部导航和表单铺设(设置红色星号和必填属性required)
    // 2. 修改 tirgger和正则，校验输入内容是否合法
    // 3. 看接口文档，统一请求参数名name和值(变量名)
    // 4. api/index.js封装接口方法，引入调用传参
    // 5. 优化按钮状态和禁用
    // 6. 把token 值存到 vuex中
  }
}
</script>

<style scoped>
/* 方案1 - 全局样式表 */
/* scoped会给标签和css选择器都叫上data-v属性选择 */
/* 因为导航组件标签身上有data-v-hash的属性 */
/* .van-nav-bar{
    background:#007bff;
  } */
/* 选择这个类名的时候, 会在后面加[data-v-hash]值来选择这个类名, 但是页面此身上没有data-v-hash属性所以选选择标签不到
  /deep/ 就是把data-v-hash值选择器写到类名的前面 */
/* /deep/.van-nav-bar__title {
    color: white;
  } */
</style>
